<template>
    <div style="overflow: hidden;">
        <div id="reg-wrapper">

            <div style="width: 100%; height: 100px;margin-bottom: 50px;">
                <img style="width: 80px;height: 80px;margin-top: 50px;float: left;margin-left: calc(30%);"
                    src="@/assets/logo1.png" alt="logo" />
                <span style="font-size: 60px;float: left;margin-top: 60px;color: #615CED;">HChat</span>
            </div>

            <br>
            <el-input class="input-box" v-model="regForm.email" style="width: 70%;margin-bottom: 3%;"
                placeholder="请输入登录邮箱" clearable>
                <template v-slot:prepend><span style="width: 60px;">邮箱</span> </template>
            </el-input>
            <el-input class="input-box" v-model="regForm.password" style="width: 70%;margin-bottom: 3%;" type="password"
                placeholder="请输入密码" show-password clearable>
                <template v-slot:prepend><span style="width: 60px;">密码</span> </template>
            </el-input>
            <el-input class="input-box" v-model="regForm.code" style="width: 70%;" placeholder="请输入邮箱验证码" clearable>
                <template v-slot:prepend><span style="width: 60px;">验证码</span>
                </template>
                <!-- <template #suffix>
                    <el-button @click="sendCode"
                        :style="{ backgroundColor: '#fff', fontSize: '18px' }">获取验证码</el-button>
                </template> -->

                <template #suffix>
                    <el-button :disabled="isSending" @click="sendCode"
                        :style="{ backgroundColor: '#fff', fontSize: '18px' }">
                        {{ isSending ? `${countdown} s` : '获取验证码' }}
                    </el-button>
                </template>
            </el-input>
            <br>
            <el-button @click="register"
                style="margin-top: 30px;width: 70%;height: 50px;border-radius: 30px;background-color: #544BD2;color: #fff;font-size: 18px;">
                注 册</el-button>
            <br>
            <br>
            <a href="#/login" style="">已有账号,去登录</a>
        </div>
    </div>
</template>

<script>
import { register, sendCode } from '../api/user'
export default {
    data() {
        return {
            regForm: {
                email: '',
                password: '',
                code: ''
            },
            countdown: 0,
            isSending: false
        }
    },
    methods: {
        startCountdown() {
            let remaining = 120;
            this.countdown = remaining;
            this.isSending = true;
            const timer = setInterval(() => {
                if (remaining <= 0) {
                    clearInterval(timer);
                    this.isSending = false;
                    this.countdown = 0;
                } else {
                    this.countdown = remaining--;
                }
            }, 1000);
        },
        sendCode() {

            //正则表达式检验邮箱
            if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.regForm.email)) {
                this.$message.warning('邮箱格式不正确')
                return
            }

            sendCode(this.regForm.email).then(res => {
                // console.log(res);
                if (res.code == 1) {
                    this.$message.success('验证码发送成功,2分钟内有效')
                    this.startCountdown();

                } else {
                    this.$message.error(res.msg)
                }
            })

        },
        register() {
            //正则表达式检验邮箱
            if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.regForm.email)) {
                this.$message.warning('邮箱格式不正确')
                return
            }
            //邮箱和密码不能为空
            if (this.regForm.password.length < 6) {
                this.$message.warning('请输入6位以上密码')
                return
            }
            //验证码不能为空
            if (this.regForm.code.length != 6) {
                this.$message.warning('请输入6位的验证码')
                return
            }
            register(this.regForm).then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.$message.success('注册成功')
                    this.$router.push('/')
                } else {
                    this.$message.error(res.msg)
                }
            })
        }
    }


}
</script>

<style scoped>
#reg-wrapper {
    width: 40%;
    height: 60vh;
    margin-left: 30%;
    margin-top: 20vh;
    border-radius: 20px;
    /* border: 1px red solid; */
    background-color: #fff;
}

.input-box {
    height: 50px;
    border-radius: 10px;
    position: relative;
}

/deep/ .el-input {
    --el-input-border-radius: 15px;
    --el-input-focus-border-color: #C0C4CC;

}

/deep/ .el-input__inner {
    font-size: 18px;
    margin-left: 30px;
}

/deep/ .el-input-group__prepend {
    background-color: #fff;
    color: #000;
}
</style>